<template>
    <div class="order">
        <van-contact-card type="add" @click="onAdd"  v-if="getAddress.length === 0" add-text="选择收获地址"/>
        <van-cell-group v-if="getAddress.length>0">
            <van-cell 
            :title="getAddress[0].name" 
            :value="getAddress[0].tel" 
            :label="getAddress[0].address" 
            size="large"
            icon="location-o"
            to="/address"
            is-link
            />
        </van-cell-group>
        <!--商品订单-->
        <div>
            <div style="margin: 20px 0 20px 10px;">确认订单商品</div>
            <div class="order-list" >
                <van-swipe-cell v-for="goods in orderList" :key="goods.id" >
                <van-card
                    :num="goods.amount"
                    :price="goods.price"
                    :title="goods.title"
                    class="goods-card"
                    :thumb="goods.image"
                />
                </van-swipe-cell>
            </div>
        </div>
        <!--金额,运费 优惠卷等-->
        <div class="order-message">
            <van-cell-group>
                <van-cell title="总金额" :value="totalPrice/100" />
                <van-cell title="运费" value="0.00" />
            </van-cell-group>
            <!-- 优惠券单元格 -->
            <van-coupon-cell
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            @click="showList = true"
            />
            <!-- 优惠券列表 -->
            <van-popup
            v-model:show="showList"
            round
            position="bottom"
            style="height: 90%; padding-top: 4px;"
            >
            <van-coupon-list
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                :disabled-coupons="disabledCoupons"
                :show-exchange-bar="false"
                @change="onChange"
            />
            </van-popup>
        </div>
        <!--提交订单-->
        <van-submit-bar :price="orderPrice" button-text="去支付" @submit="onSubmit" />
    </div>
</template>

<script>
import { couponCellProps } from 'vant';
import { get } from 'vant/lib/utils';
import { mapGetters,mapMutations } from 'vuex'
import { getAddress } from '../../api/address';


const coupon = {
    available: 1,
    condition: '无门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
    }
const coupon2 = {
    available: 1,
    condition: '无门槛\n最多优惠12元',
    reason: '',
    value: 1000,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '10.0',
    unitDesc: '元',
    }

export default {
    name: 'Order',
    data() {
        return {
            showList:false,
            chosenCoupon: -1,
            coupons: [coupon,coupon2],
            disabledCoupons: [coupon],
        }
    },
    computed: {
        ...mapGetters('shoppingCart',['cart','totalPrice',]),
        ...mapGetters('address',['getAddress']),
        orderList() {
            return this.cart.filter(item => item.checked)
        },
        orderPrice() {
            //判断是否有优惠券,计算订单价格
            const orderPrice = Number(this.totalPrice) - (Number(this.coupons[this.chosenCoupon]?.value)? Number(this.coupons[this.chosenCoupon]?.value):  0)
            return orderPrice 
        }

    },
    methods: {
        
        onAdd() {
            this.$router.push('/address')
        },
        onSubmit() {
            // console.log('支付了');
            // console.log(this.orderList);
            // console.log('------------------------');
            // console.log(this.totalPrice);
            // console.log(this.coupons[this.chosenCoupon].value);
            // console.log(this.orderPrice);
            console.log(this.getAddress[0]);
        },
        onChange(index) {
            this.showList = false;
            this.chosenCoupon = index;
            // console.log(this.chosenCoupon);
            // console.log(this.coupons);
        },
    }
}
</script>

<style scoped>

.order{
    --van-submit-bar-background:#f5f5f5;
    
}
.order-list{
    width: 90%;
    margin: auto
}

</style>
